<template>
  <div class="activity-manage">
    <Map ref="mapRef" class="map" mapId="activityManageMap" :mapInitOptions="mapOptions" withDarw />
    <main class="activity-manage-main">
      <FoldCard title="安保活动列表" expandPosValueX="var(--ycy-gap-base)" foldPosValueX="calc(var(--ycy-gap-base) * 2)" foldPosValueY="calc(var(--ycy-gap-base) * 2)"  ref="foldCardRef" >
        <IssuedAsideList @clickItem="onClickItem" />
      </FoldCard>
      <FoldCard title="安保力量总览" :expandPosValueX="tableListMarginStyle.marginLeft" width="324px" foldPosValueX="calc(var(--ycy-gap-base) * 2)" foldPosValueY="76px" ref="PowerTreefoldCardRef">
        <PowerTree />
      </FoldCard>
      <FoldCard
        title="区域绘制"
        expandPosTypeX="right"
        expandPosValueX="var(--ycy-gap-base)"
        expandPosValueY="calc(332px + calc(100% - 192px - 332px - var(--ycy-gap-base) * 4) + var(--ycy-gap-base) * 3)"
        foldPosTypeX="right"
        foldPosValueX="var(--ycy-gap-base)"
        foldPosValueY="calc(44px * 2 + var(--ycy-gap-base) * 3)"
        height="192px"
      >
        <DrawSelect :mapRef="mapRef" />
      </FoldCard>
      <FoldCard
        title="样式编辑"
        expandPosTypeX="right"
        expandPosValueX="var(--ycy-gap-base)"
        expandPosValueY="calc(332px + var(--ycy-gap-base) * 2)"
        foldPosTypeX="right"
        foldPosValueX="var(--ycy-gap-base)"
        foldPosValueY="calc(44px + var(--ycy-gap-base) * 2)"
        height="calc(100% - 192px - 332px - var(--ycy-gap-base) * 4)"
      >
        <template #header>
          <!-- <el-dropdown v-if="currStyleType" trigger="click" @command="onStyleTypeChange" @visible-change="onStyleTypeOptionVisibleChange">
            <section class="style-type-select">
              <span>{{ currStyleType }}</span>
              <el-icon class="style-type-select-icon" :class="{ 'option-visible': styleTypeOptionVisible }"><ArrowDown /></el-icon>
            </section>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in STYLE_TYPE_OPTIONS" :key="item.value" :command="item.label">{{ item.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown> -->
          <el-button link type="warning" :icon="RefreshRight">重置</el-button>
          <el-button link type="primary" :icon="Check">确定</el-button>
        </template>
        <StyleEdit v-model:currStyleType="currStyleType" :mapRef="mapRef" ref="styleEditRef" />
      </FoldCard>
      <FoldCard
        title="数据编辑"
        expandPosTypeX="right"
        expandPosValueX="var(--ycy-gap-base)"
        expandPosValueY="var(--ycy-gap-base)"
        foldPosTypeX="right"
        foldPosValueX="var(--ycy-gap-base)"
        foldPosValueY="var(--ycy-gap-base)"
        height="332px"
      >
        <template #header>
          <el-button link :icon="Edit" type="primary" >编辑样式</el-button>
          <el-button link :icon="Delete" type="danger" @click.stop="onDeleteRows">删除</el-button>
          <el-button link :icon="Plus" type="primary" @click.stop="onSaveData">保存</el-button>
        </template>
        <DataEdit :mapRef="mapRef" ref="dataEditRef" />
      </FoldCard>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, useTemplateRef, onMounted } from 'vue'
import Map from '@/components/Map/index.vue';
import PowerTree from './components/PowerTree.vue';
import DrawSelect from './components/DrawSelect.vue';
import StyleEdit from './components/StyleEdit.vue';
import DataEdit from './components/DataEdit.vue';
import IssuedAsideList from '@/views/DutyManage/components/IssuedAsideList.vue';
import { useTableListMarginStyle } from '@/hooks/useTableListMarginStyle'
import { Plus, Edit, Check, RefreshRight, Delete } from '@element-plus/icons-vue';
import { STYLE_TYPE, STYLE_TYPE_OPTIONS } from './config';

onMounted(() => {
  console.log('主页', mapRef.value);
})

const mapRef = useTemplateRef('mapRef')
const mapOptions = {
  zoom: 12
}

const styleEditRef = useTemplateRef('styleEditRef')
const dataEditRef = useTemplateRef('dataEditRef')
const foldCardRef = useTemplateRef('foldCardRef')
const tableListMarginStyle = useTableListMarginStyle(foldCardRef);

const currStyleType = ref('');
const styleTypeOptionVisible = ref(false);

const onClickItem = item => {

}

const onStyleTypeChange = type => { 
  currStyleType.value = type;
  dataEditRef.value.onSelectData(styleEditRef.value.currMarkType);
}

const onStyleTypeOptionVisibleChange = isShow => {
  styleTypeOptionVisible.value = isShow;
}

const onDeleteRows = () => {

}

const onSaveData = () => {
  dataEditRef.value.saveData();
}
</script>

<style lang="scss" scoped>
.activity-manage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding-top: var(--ycy-top-bar-height);

  &-main {
    pointer-events: none; // 禁用鼠标事件，为了能让鼠标点击到地图。如果是该main的子项，则需要设置pointer-events: all;
    position: relative;
    width: 100%;
    height: calc(100% - var(--ycy-top-bar-height));
    margin-top: var(--ycy-top-bar-height);
  }

  .style-type-select {
    font-size: var(--el-font-size-base);
    color: var(--el-color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;

    &-icon {
      margin-left: calc(var(--ycy-gap-small) / 2);
      transition: var(--ycy-transition-base);

      &.option-visible {
        transform: rotateZ(180deg);
      }
    }
  }
}
</style>
